<!DOCTYPE html>
<!-- 
	GeoEye Keynote Presentation Demonstration
	2011 Google Geospatial Awareness Day
	
	By: Alan Poole and Deke Young, GeoEye
	Date: August 24, 2011
 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>GeoFUSE + Google Fusion Tables + Google Maps, 2011 Google
	Geospatial Awareness Day, GeoEye Keynote</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
	// Google Maps API instance, once initialized
	var map;

	// an array of Google Maps API markers
	var markersArray = [];

	// a well known text (WKT) object
	var mapWKT;

	// the Google Fusion Tables "heat map" layer, once created
	var layer_HeatMap;

	// the Google Fuison Tables layer, once created
	var layer_GeoFUSE;

	// the maximum zoom level (switch between "heat map" to real features)
	var MAX_ZOOM = 4;

	// function to initialize the Google Maps API once the page is fully loaded
	function initMap() {
		// call the resize function to check for changes in the page size
		ResizeApp();

		// set the default latitude and longitude to 0,0
		var latlng = new google.maps.LatLng(0, 0);

		// establish the initial map options
		var myOptions = {
			zoom : 2,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};

		// create new instance of the Google Maps API in the mapCanvas div
		// use the map options established above
		map = new google.maps.Map(document.getElementById("mapCanvas"),
				myOptions);

		// determine today's date and 30-days time span
		var today = new Date();
		var t30_days_ago = new Date(today.setDate(today.getDate() - 30));

		// establish a new Google Fusion Tables layer
		// Google Fusion Table Id: 643812
		// Enable the heat map, showing the index of records at worldwide scales
		// establish a custom query to limit the features to 30-days or less
		layer_HeatMap = new google.maps.FusionTablesLayer(643812, {
			heatmap : true,
			query : "SELECT Location FROM 643812 WHERE CollectionDate>='"
					+ (t30_days_ago.getMonth() + 1) + "/"
					+ t30_days_ago.getDate() + "/" + t30_days_ago.getFullYear()
					+ "'"
		});

		// if the map is already less than or equal the maximum zoom
		// enable the heat map layer by setting the map instance of the layer
		if (map.getZoom() <= MAX_ZOOM)
			layer_HeatMap.setMap(map);

		// establish a new GOogle Fusion Tables layer
		// Google Fusion Table Id: 643812
		// disable information windows, as we will use custom info bubbles in this code
		layer_GeoFUSE = new google.maps.FusionTablesLayer({
			query : {
				select : 'Location',
				from : '643812'
			},
			suppressInfoWindows : true
		});

		// if the map is already greater than the maximum zoom
		// enable the GeoFUSE layer by setting the map instance of the layer
		if (map.getZoom() > MAX_ZOOM)
			layer_GeoFUSE.setMap(map);

		// add a map listenter to "listen" for map clicks
		// this will allow for us to watch for users that click on the GeoFUSE layer
		// allowing for custom information bubbles
		google.maps.event
				.addListener(
						layer_GeoFUSE,
						'click',
						function click(payload) {
							// create a new information bubble content for this click
							// payload = the Google Fusion Tables record
							var contentStringzz = "<div id=\"imgdetail\">"
									+ payload.infoWindowHtml
									+ "<div style=\"color:#4C4C4C;font-size:11px;font:normal normal normal 11px/14px Arial, Helvetica, Geneva, sans-serif;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; \">&rsaquo; <a href=\"javascript: openImageInGeoFUSE('"
									+ payload.row.UniqueStripIdentifier.value
									+ "', 'MAP')\">Open Image in GeoFUSE</a> (<a href=\"javascript: openImageInGeoFUSE('"
									+ payload.row.UniqueStripIdentifier.value
									+ "', 'HTML')\">HTML</a>,<a href=\"javascript: openImageInGeoFUSE('"
									+ payload.row.UniqueStripIdentifier.value
									+ "','KML')\">KML</a>,<a href=\"javascript: openImageInGeoFUSE('"
									+ payload.row.UniqueStripIdentifier.value
									+ "', 'CSV')\">CSV</a>,<a href=\"javascript: openImageInGeoFUSE('"
									+ payload.row.UniqueStripIdentifier.value
									+ "', 'SHP')\">SHP</a>)</div>" + "</div>";

							// create a new information bubble with the content above
							var infowindowzz = new google.maps.InfoWindow({
								content : contentStringzz
							});

							// create a new marker, at the location of the click
							var m = new google.maps.Marker({
								position : payload.latLng
							});

							// open the marker's information bubbel
							infowindowzz.open(map, m);
						});

		// add a map listenter to "listen" for map zooms
		// if the map zooms in past the maximum zoom level, change to real features "GeoFUSE"
		// if the map zooms out past the maximum zoom level, enable the heat map layer
		google.maps.event.addListener(map, 'zoom_changed', function onZoom() {
			if (map.getZoom() > MAX_ZOOM) {
				layer_HeatMap.setMap(null);
				layer_GeoFUSE.setMap(map);
			} else {
				layer_HeatMap.setMap(map);
				layer_GeoFUSE.setMap(null);
			}
		});
	}

	// function to load map script asynchronously by
	// adding the script tag once the page is loaded
	// the script will call function 'initialize' once the page is loaded
	function loadMapScript() {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false&callback=initMap";
		document.body.appendChild(script);
	}

	// once the page is loaded, this function will execute
	// the loadMapScript function
	window.onload = loadMapScript;

	// function to grab a specific parameter from the query string
	function gup(name) {
		name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
		var regexS = "[\\?&]" + name + "=([^&#]*)";
		var regex = new RegExp(regexS);
		var results = regex.exec(window.location.href);
		if (results == null)
			return "";
		else
			return results[1];
	}

	// function called when a user clicks a link in the information bubble
	// function redirects to GeoEye's GeoFUSE application appropriately
	// this is only a sample
	function openImageInGeoFUSE(UniqueStripIdentifier, FileFormat) {
		var URL = "http://geofuse.geoeye.com/ArcGIS/rest/services/GeoEyeCatalogFeatures/MapServer/exts/CatalogServer/Query";
		var QUERY1 = "ascending=&breakField=&geometry=&geometryType=&inSR=&outFields=&outSR=&pageSize=&pageStart=&returnGeometry=&sortField=&sort=&spatialRank=&spatialRel=&find=&where=";
		var WHERE_CLAUSE = "ORDERING_ID+LIKE+%27%25%28" + UniqueStripIdentifier
				+ "%29%27+OR+ORDERING_ID+%3D+%27" + UniqueStripIdentifier
				+ "%27" + UniqueStripIdentifier + "'";

		// determine the request type
		if (FileFormat == "MAP") {
			$
					.ajax({
						type : "GET",
						url : "http://geofuse.geoeye.com/ArcGIS/rest/services/GeoEyeCatalogFeatures/MapServer/2/query?text=&geometry=&geometryType=esriGeometryPoint&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&objectIds=&where=ORDERING_ID+LIKE+%27%25%28"
								+ UniqueStripIdentifier
								+ "%29%27+OR+ORDERING_ID+%3D+%27"
								+ UniqueStripIdentifier
								+ "%27&time=&returnIdsOnly=false&returnGeometry=true&maxAllowableOffset=&outSR=&outFields=ORDERING_ID&f=json",
						success : function(msg2) {
							//alert(msg2);
						},
						fail : function(msg2) {
							//alert(msg2);
						}
					});

		} else if (FileFormat == "HTML") {
			window.open(URL + "?" + QUERY1 + WHERE_CLAUSE + "&f=html",
					"GeoEye GeoFUSE");
		} else if (FileFormat == "KML" || FileFormat == "KMZ") {
			window.open(URL + "?" + QUERY1 + WHERE_CLAUSE + "&f=kmz",
					"GeoEye GeoFUSE");
		} else if (FileFormat == "CSV") {
			window.open(URL + "?" + QUERY1 + WHERE_CLAUSE + "&f=csv",
					"GeoEye GeoFUSE");
		} else if (FileFormat == "SHP") {
			window.open(URL + "?" + QUERY1 + WHERE_CLAUSE + "&f=shp",
					"GeoEye GeoFUSE");
		}
	}

	// resize the page and map canvas
	function ResizeApp() {
		try {
			var htmlheight = document.body.parentNode.clientHeight;
			var windowheight = window.screen.height;
			var frame = document.getElementById("mapCanvas");
			if (htmlheight < windowheight) {
				frame.style.height = windowheight + "px";
			}
		} catch (e) {
		}
	}
</script>
</head>

<body style="height: 100%; margin: 0; padding: 0;">
	<div id="mapCanvas" style="width: 100%; height: 400px"></div>
</body>
</html>